<template>
  <div class="rcbj-view">
    <el-form
      ref="form"
      label-position="right"
      label-width="200px"
      :model="formdata"
      :rules="rules"
      v-if="isyuyuechenggong"
    >
      <el-form-item label="地址：" prop="dizhi">
        <el-input
          placeholder="请输入地址"
          v-model="formdata.dizhi"
          clearable
        ></el-input>
      </el-form-item>

      <el-form-item label="手机\电话：" prop="phone">
        <el-input
          placeholder="请输入手机或电话"
          v-model="formdata.phone"
          clearable
        ></el-input>
      </el-form-item>
      <br />
      <el-form-item label="留言：" prop="leavingAMessage">
        <el-input
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 8 }"
          placeholder="留言内容"
          v-model="formdata.leavingAMessage"
          style="width: 100%"
          clearable
        >
        </el-input>
      </el-form-item>

      <div class="jiner">
        <el-button type="warning" class="tijiao" plain @click="submitForm"
          >确认预约</el-button
        >
      </div>
    </el-form>

    <div v-else>
      <el-result icon="success" title="预约完成">
        <template slot="extra">
          <h1>
            收到您的预约信息之后，工作人员将在12-24小时内与您联系，根据具体需求，尽快上门与您沟通确认方案。
          </h1>

          <el-button type="success" @click="$router.push({ name: 'FServe' })" class="w-full m-t-20 p-20"
            >返回</el-button
          >
        </template>
      </el-result>
    </div>
  </div>
</template>

<script>
import dayjs from "dayjs";

export default {
  data() {
    var validateMobile = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入手机号"));
      } else if (!/^1[3|5|7|8|9]\d{9}$/.test(value)) {
        callback(new Error("请输入正确的手机号码格式"));
      } else {
        callback();
      }
    };

    return {
      user: JSON.parse(localStorage.getItem("xm-user") || "{}"),
      formdata: {
        type: 3,
        dizhi: "",
        phone: "",
        fuwurenshu: 1,
      },
      rules: {
        dizhi: [{ required: true, message: "请输入地址", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { validator: validateMobile, trigger: "blur" },
        ],
      },
      isyuyuechenggong: true,
    };
  },
  computed: {
    amountOfMoney() {
      return this.formdata.guige * this.formdata.fuwurenshu;
    },
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(async (valid) => {
        console.log("🚀 ~ this.$refs.form.validate ~ valid:", valid);
        this.butloading = true;
        if (valid) {
          const res = await this.$request({
            url: "/order/add",
            method: "POST",
            data: {
              type: this.formdata.type,
              phone: this.formdata.phone,
              dizhi: this.formdata.dizhi,
              isdel: 0,
              leavingAMessage: this.formdata.leavingAMessage,
              fuwudate: dayjs().format("YYYY-MM-DD HH:mm:ss"),
              paymentStatus: 2,
              json: JSON.stringify(this.formdata),
              userId: this.user.id,
              jiner: 0,
            },
          });

          if (res.code == 200) {
            this.$message.success("提交成功");
            this.isyuyuechenggong = false;
          }
          this.butloading = false;
        } else {
          this.butloading = false;
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.rcbj-view {
  padding: 0 5vw;
}

::v-deep .el-form-item__label {
  font-size: 26px;
}

.jiner {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;

  .text {
    width: 200px;
    height: 55px;
    border: 1px solid #c6c6c6;
    font-size: 26px;
    font-weight: 700;
    line-height: 55px;
    text-align: center;
    color: #ff8585;
    border-radius: 3px;
  }

  .tijiao {
    width: 200px;
    height: 55px;
    font-size: 20px;
    margin-left: 20px;
  }
}
</style>
